<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />

        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
        Remove this if you use the .htaccess -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

        <title>web07</title>
        <meta name="description" content="" />
        <meta name="author" content="Choongang31" />

        <meta name="viewport" content="width=device-width; initial-scale=1.0" />

        <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
        <link rel="shortcut icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script>
            $(document).ready(function(){
                $("button").click(function(){
                    console.log("this",this);
                    /* $===jQuery 약자 
                     * =대입
                     * ==값이 같느냐 
                     * ===값도 같고 타입도 같느냐 
                     */
                    console.log("$",$);
                    console.log("jQuery",jQuery);
                    $(this).hide();
                });
            });
        </script>
        <script>
            $(document).ready(function(){
                $("img").click(function(){
                    console.log("this",this);
                    $(this).hide(1000);
                });
            
            $("ol li.center").click(function(){
                console.log("this",this);
                $(this).hide(1000);
            });
            //ol의 자식중에서 맨 처음에 있는 것 
            $("ol:first-child").click(function(){
                console.log("this",this);
                $(this).css("background","red");
            });
            //li중에서 맨 마지막에 있는 것 
            $("li:last").click(function(){
                console.log("this",this);
                $(this).css("color","blue");
                $(this).css("font-size","1.5em");
            });
            //짝수만 
            $("td:odd").css("background-color","gray");
            //홀수만 
            $("td:even").css("background-color","pink");
            //속성중에 타입이 "text"인것들 
            $(":text").css("color","#ff00ff");
            $("[name='country']").css("font-size","2em");
            //width속성이 존재하는 것들
            $("[width]").css("width","200px");
            //height가 100이아닌 모든것들 (바디까지도 포함 )
            $("[height!=100]").css("background-color","brown");
            var number=0;  //전역 변수 선언 
            $("img").mouseenter(function(){
                //원래의 크기보다 10% 증가시키겠다.
                 //원래의 width값 return
                originalWidth=$(this).css("width");
                //01234 , 0부터 4전 까지의 값을 빼오자 
                //200px*1.5=nan
                number=originalWidth.substring(0,3);
                console.log("number",number);
                console.log("10%확대 ",originalWidth*1.1);
                $(this).css("width",number*1.1+"px");
            }).mouseleave(function(){
                $(this).css("width",number+"px");
            });
            var i=0;
            //더블클릭과 클릭을 같이 셋팅하면 클릭만 됩니다.
            $(":text").dblclick(function(){
                 i++;
                $(this).css("color","gold")
                       .css("background-color","black")
                       .css("font-size",i*4+"px");
            }).focus(function(){
               $(this).css("background-color","white") 
            }).blur(function(){
                $(this).css("background-color","red")
            });
            //focus상태: 글을 쓸수 있는 상태 (커서가 깜박 )
            //blur상태: 글을 못쓰는 상태 (커서가 없음 )
            
            //toggle 번갈아 가변서 실행.
            $("div").toggle(
                function(){
                    //500ms, 끝나면 yellow 실행해라.(callback)
                    $("img").hide(500,yellow);
                },
                function(){
                    //300ms, 끝나면 white 실행하라.(callback)
                    $("img").show(300,white);
                });
              yellow=function(){               
                  $("div").css("background-color","yellow");
              }  
              white=function(){
                  $("div").css("background-color","white");
              }
          });
        </script>
    </head>

    <body>
        <input type="text" name="country" value="korea">
        <table>
            <tr><td>first</td><td>second</td></tr>
            <tr><td>third</td><td>fourth</td></tr>
        </table>
        <ol><li>7A2BE7EEFEF83F7F.jpg</li><li class="center">82FEC52F81C39AC7.jpg</li><li>B3966D9A6377C91B.jpg</li></ol>
    <button>
        누르면 사라진다.
    </button>
    <img src="7A2BE7EEFEF83F7F.jpg" width="230" height="350">
    <img src="82FEC52F81C39AC7.jpg" width="230" height="350">
    <img src="B3966D9A6377C91B.jpg" width="230" height="350">
               
    <div>show and hide</div>
    </body>
</html>
